<template>
  <custom-page :disable="disable">
    <view>
      <view style="padding: 0 40rpx;background-color: #FFFFFF;">
        <u--form
            labelPosition="left"
            ref="form1"
			:model="list"
			:rules="rules"
        >
          <u-form-item
              labelAlign="center"
              label="姓名"
              prop="userInfo.name"
              :borderBottom="false"
              borderBottom
              ref="item1"
              labelWidth="200"
              :labelStyle="{'font-size':'50rpx'}"
          >
            <u--input
                placeholder="请输入姓名"
                border="none"
                width="300"
				v-model="list.userInfo.name"
				disabledColor="#ffffff"
				disabled
            ></u--input>
          </u-form-item>
          <u-form-item
              labelAlign="center"
              label="手机号码"
              prop="userInfo.mobile"
              borderBottom
              ref="item1"
              labelWidth="200"

          >
            <u--input
                placeholder="请输入手机号码"
                border="none"
                width="300"
				type="number"
				v-model="list.userInfo.mobile"
				disabledColor="#ffffff"
				disabled
            ></u--input>
          </u-form-item>
          <u-form-item
              labelAlign="center"
              label="报修位置"
              prop="userInfo.location"
              borderBottom
              ref="item1"
              labelWidth="200"

          >
            <u--input
                placeholder="请填写位置(如:房号)"
                border="none"
                width="300"
				v-model="list.userInfo.location"
            ></u--input>
          </u-form-item>
          <u-form-item
              labelAlign="center"
              label="报修原因"
              prop="userInfo.mark"
              borderBottom
              ref="item1"
              labelWidth="200"

          >
            <!-- <u--input
                placeholder="请填写报修原因"
                border="none"
                width="300"
            ></u--input> -->
            <u--textarea height="100rpx" placeholder="请填写报修原因" confirm-type="send" v-model="list.userInfo.content"></u--textarea>
          </u-form-item>
          <u-form-item
              labelAlign="center"
              label="上传图片"
              borderBottom
              ref="item1"
              labelWidth="200"

          >
            <!-- <u-upload
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                multiple
                :maxCount="10"
                uploadText="请上传图片"
                width="200"
                height="200"
				:file-list="fileList"
            ></u-upload> -->
			<u--image v-for="(item,index) in fileList" :key="index" width="150" height="150" @click='btnphoto'  :src="item" ></u--image>
          </u-form-item>
        </u--form>
      </view>
      <view style="margin-top: 40rpx;padding: 0 20rpx;" @click="submit">
        <u-button type="primary" size="large">提交</u-button>
        <!-- <u-button type="success" style="margin-top: 10px;" @click="btn" size="large">返回</u-button> -->
      </view>
      <!-- <view style="text-decoration: underline;float: right;margin: 20rpx;
      margin-top: 30rpx;">历史报修</view> -->
      <view style="background-color: #FFFFFF;margin-top: 100rpx;">
        <u-cell-group
            :border="false">
          <u-cell
              :titleStyle="{'font-size':'38rpx'}"
              size="large"
              title="历史报修"
          ></u-cell>
        </u-cell-group>
        <view class="repairList" v-for="(item,index) in repairList" :key="index" @click="goRate(item.id)">
          <text class="cont1">{{item.create_time}}</text>
          <span class="cont">{{item.content}}</span>
          <u-tag text="维修中" v-if="item.status == 1"  size="mini" type="warning" shape="circle"></u-tag>
		  <u-tag text="待评价" size="mini" v-if="item.status == 2" type="success" shape="circle"></u-tag>
		  <u-tag text="待处理" size="mini" v-if="item.status == 0" type="primary" shape="circle"></u-tag>
		  <u-tag text="已评价" size="mini" v-if="item.status == 3" type="info" shape="circle"></u-tag>
        </view>
        <!-- <view class="repairList">
          <text>2000-12-12</text>
          <span>门把手坏了</span>
          <u-tag text="完毕" size="mini" type="success" shape="circle"></u-tag>
        </view> -->
        <!-- <view class="repairList">
          <text>2000-12-12</text>
          <span>门把手坏了</span>
          <u-tag text="接报" size="mini" type="primary" shape="circle"></u-tag>
        </view> -->
      </view>

    </view>
  </custom-page>
</template>

<script>
	import Api from '@/util/api.js'
export default {
	data() {
		return {
			fileList: [''],
			showSex: false,
			disable:true,
			userInfo: {},
			list:{								
				userInfo:{
					name:'',
					mobile:'',
					location:'',
					content:''
				}
			},
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.mobile': {
					type: 'number',
					max:11,
					required: true,
					message: '请输入正确的手机号码',
					trigger: [ 'change']
				},
				'userInfo.location': {
					type: 'string',
					required: true,
					message: '请填写报修地址',
					trigger: ['blur', 'change']
				},
				'userInfo.content': {
					type: 'string',
					required: true,
					message: '请填写报修原因',
					trigger: ['blur', 'change']
				},
			},
			repairList:[]					//报修记录
		}
	},
	onLoad(e) {
		var that = this
		that.checkUser()
		that.getRepairReocrd()
		if('type' in e){
			that.disable = false
		}
		that.list.userInfo.name = that.userInfo.real_name
		that.list.userInfo.mobile = that.userInfo.tel
	},
	methods: {
		// 提交报修记录
		async submit(e) {
			var that = this
			
		 that.$refs.form1.validate().then( async (res) => {
				// uni.$u.toast('校验通过')
			uni.showLoading({
				title: '提交中'
			});
			var fileList = that.fileList;
			console.log('图片组',fileList);
			var fault_img  = []
			var formData = {
					category:'un',
					admin_id:that.userInfo.id
				}
			for (let item of fileList) {
				if(item != ''){
				await Api.getUpload(item,'fee_date',formData).then(res=>{
						console.log('res',res)
						if(res.data != []){
							fault_img.push(res.data.detail.id)
						}
						// that.img = res.data.detail.link
						// that.list.userInfo.avatar = res.data.detail.link
					})
				}
			}
			console.log('fault_img',fault_img)
			var data = that.list.userInfo
			data['fault_img'] = fault_img
			data['user_id'] = that.userInfo.id
			Api.addRepairRecord(data).then(res=>{
				console.log('添加成功',res)
				 uni.showToast({
					title: '提交成功',
					icon: 'success',
					duration: 1000
				})
				setTimeout(() => {
					uni.redirectTo({
						url: './repair'
					});
				}, 600);
				
			})
			}).catch(errors => {
				// uni.$u.toast('校验失败')
			})
		},
		btn(){
			uni.navigateBack()
		},
		// 检查用户信息
		checkUser(){
			var that  = this
			var userInfo = that.userInfo;
				if(localStorage.getItem('userInfo')){
					that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
				}else{
					uni.showToast({
					    icon: 'none',   
					    duration: 3000,
					    title: "当前用户未登录"
					});
					return;
				}
			
			
		},
		// 选择图片
		btnphoto() {
			var that=this;
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log('临时图片路径',res)
							if(res.tempFilePaths.length == 3){
								console.log('我进来了')
								that.fileList = res.tempFilePaths;
							}else if(res.tempFilePaths.length == 2){
								// that.fileList.unshift(res.tempFilePaths[0]);
								that.fileList = res.tempFilePaths;
								that.fileList.push('')
							}else if(res.tempFilePaths.length == 1){
								// that.fileList = ;
								if(that.fileList.length <= 3){
									that.fileList.splice(that.fileList.length-1,0,res.tempFilePaths[0])
								}else{
									that.fileList.splice(that.fileList.length-2,1)
									that.fileList.splice(that.fileList.length-1,0,res.tempFilePaths[0])
								}
							}
							if(that.fileList.length == 4){
								that.fileList.splice(that.fileList.length-1,1,)
							}
							console.log(that.fileList);
						
									  
					}
				});
		},
		
		// 获取用户报修记录
		getRepairReocrd(){
			var that = this
			var data = {
				user_id:that.userInfo.id
			}
			Api.getRepairReocrd(data).then(res=>{
				console.log('获取成功',res)
				that.repairList = res.data
			})
		},
		
		goRate(id){
			console.log('我被点击了')
			uni.navigateTo({
				url: "../repair_rate/repair_rate?id="+id
			})
		}
	},
}
</script>
<style lang="scss">
	.repairList {
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		align-items: center;
	}
	.cont{
		width: 33%;
		overflow:hidden;/*内容超出后隐藏*/
		text-overflow:ellipsis;/*超出内容显示为省略号*/
		white-space:nowrap;/*文本不进行换行*/
	}
	.cont1{
		width: 27%;
		overflow:hidden;/*内容超出后隐藏*/
		// text-overflow:ellipsis;/*超出内容显示为省略号*/
		white-space:nowrap;/*文本不进行换行*/
	}
</style>
